<template>
  <div class="box">
    <div class="title">
      <span>总余额(元)</span>
      <p @click="$router.push('/zhMx')">查看明细 ></p>
    </div>
    <div class="middle">
      <div class="price">
        <p>{{ allPrice }}</p>
      </div>
      <div class="ti">
        <p class="tip">重要提示:</p>
        <p class="tip1">
          为提升服务体验，自2017.05.12起，退款至余额已优化为直接
          退款至支付帐号，如退款后您的支付账号未收到退款，请于30
          分钟后再次查看。 如遇异常情况，请联系春雨客服:400-001- 8855
        </p>
      </div>
    </div>
    <div class="bottom">
      <p>春雨医生</p>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
const allPrice = ref(1000)
</script>

<style scoped>
.box {
  width: 100%;
  /* height: 50%; */
  height: 600px;
}
.title {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
}
.title span {
  color: #999;
}
.title p {
  color: rgb(53, 241, 46);
}
.middle {
  margin-top: 10px;
  width: 100%;
  height: 60%;
}
.middle .price {
  width: 100%;
  /* height: 250px; */
  height: 50%;
  line-height: 150px;
}
.price p {
  font-size: 140px;
  margin-left: 5%;
  color: #20e320;
}
.ti {
  width: 100%;
  /* height: 200px; */
  height: 30%;
}
.tip {
  width: 100%;
  height: 10%;
  font-size: 18px;
  color: #999;
  font-weight: 500;
  padding-left: 5%;
}

.tip1 {
  width: 90%;
  height: 90%;
  font-size: 15px;
  margin-top: 20px;
  padding: 0 5%;
}
.bottom {
  width: 100%;
  height: 5%;
  padding-left: 5%;
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-25%);
  font-size: 30px;
}
</style>